import React,{useState,useEffect,useContext} from 'react'
import { SwipeAction,Button,Dialog,Toast } from 'antd-mobile'
import yImg from "../../assets/img/y.jpeg"
import nImg from "../../assets/img/n.jpeg"
import { $pre } from '../../http/http'
import {reqcartlist,reqcartedit,reqcartdelete} from "../../http/api"
import { MyContext } from '../../App'
import './Shop.less'
import Header from '../../components/Header/Header'
export default function Shop() {
  const [arr,setArr] = useState([])
  const {state:{userInfo:{uid}}} = useContext(MyContext)
  const [allchecked,setallChecked] = useState(false)
  const [onechecked,setoneChecked] = useState(false)

  useEffect(()=>{
    //请求列表
    getcar()
  },[])
  //请求列表
  const getcar = ()=>{
    reqcartlist({uid}).then(res=>{
      let arr = res.data.list[1].content?res.data.list[1].content:[]
      setArr(arr)
    })
  }
  //增加+
  const add=(id)=>{
    reqcartedit({id,type:2}).then(res=>{
      if(res.data.code==200){
        Toast.show({
          content:res.data.msg
        })
        getcar()  
      }
    })
  }
  //减少-
  const sub=(id,num)=>{
    reqcartedit({id,type:1}).then(res=>{
       if(num>0){
        if(res.data.code==200){
          Toast.show({
            content:res.data.msg
          })
          getcar()  
        }
       }else{
        Toast.show({
          content:"宝贝不能再少啦 "
        }) 
       }
    })   
  }
  //全选
  const changeAll=()=>{
    let val = !allchecked;
    setallChecked(val)
    arr.forEach((item)=>{item.checked=val})
  }
  //选中一个
  const changeOne=(index)=>{
    let checked = !arr[index].checked

    arr[index].checked = checked
    //要放回去的
    setArr([...arr])
    let newAllChecked = arr.every(item=>item.checked)
    setallChecked(newAllChecked)
  }
  const del=(id)=>{
    reqcartdelete({id:id}).then(res=>{
      if(res.data.code==200){
        Toast.show({
          content:res.data.msg
        })
        getcar()  
      }
    })
  }
  return ( 
    <div className='shop'>
       <Header title='购物车'></Header>
      {arr.map((item, index) => (
        <SwipeAction         
          key={item.id}
          closeOnAction={false}
          closeOnTouchOutside={false}
          rightActions={[
            {
              key: 'delete',
              text: '删除',
              color: 'danger',
              onClick: async () => {
                await Dialog.confirm({
                  content: '确定要删除吗？',
                  onConfirm: () => del(item.id)
                })
              },
            },
          ]}
        >
          <div className='item' >
            <img className='checkbox' src={item.checked ? yImg : nImg} onClick={()=>changeOne(index)} alt="" />
            <img className='img'  src={$pre + item.img} alt="" />
            <div className='right'>
              <h3>name:{item.goodsname}</h3>
              <div>price:{item.price}</div>
              <div>
                <Button onClick={()=>sub(item.id,item.num)} >-</Button>
                {item.num}
                <Button onClick={()=>add(item.id)}>+</Button>
              </div>
            </div>

          </div>
        </SwipeAction>
      )
      )}
      {/* 全选总价 */}
      <div className='footer'>
        <div className='allChecked' onClick={()=>changeAll()}>
          
          <img className='checkbox' src={allchecked?yImg:nImg} alt=""  />全选
        </div>
        <div className='allPrice'>￥00.00</div>

      </div>      
    </div>
  )
}
